<template>
  <div class="top-nav">
    <!-- 左侧区域：菜单折叠按钮 -->
    <div class="top-nav-left">
      <Button 
        icon="Menu" 
        class="mr-2"
        @click="layoutStore.toggleSidebar"
        :aria-label="layoutStore.sidebarCollapsed ? '展开菜单' : '折叠菜单'"
      />
    </div>
    
    <!-- 右侧区域：用户信息、主题切换、通知等 -->
    <div class="top-nav-right">
      <!-- 通知组件 -->
      <Notification />
      
      <!-- 主题切换组件 -->
      <ThemeSelect />
      
      <!-- 用户信息 -->
      <div v-if="userStore.userInfo" class="user-info">
        <img :src="userStore.userInfo.avatar || defaultAvatar" alt="用户头像" class="user-avatar">
        <span class="user-name">{{ userStore.userInfo.nickname || userStore.userInfo.username }}</span>
        <Button 
          icon="ChevronDown" 
          class="ml-1 user-menu-button"
          @click="toggleUserMenu"
        />
        <div v-if="showUserMenu" class="user-dropdown-menu">
          <div class="menu-item" @click="goToProfile">个人中心</div>
          <div class="menu-item" @click="goToSettings">设置</div>
          <div class="menu-separator"></div>
          <div class="menu-item text-red-500" @click="handleLogout">退出登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 使用相对路径替代别名路径
import { ref, onMounted } from 'vue'
import { useLayoutStore } from '../../store/modules/layout'
import { useUserStore } from '../../store/modules/user'
import Button from 'primevue/button'
import Notification from '../../components/Notification/index.vue'
import ThemeSelect from '../../components/ThemeSelect/index.vue'

// 导入router
import router from '../../router'

// 初始化 store
const layoutStore = useLayoutStore()
const userStore = useUserStore()

// 默认头像
const defaultAvatar = 'https://via.placeholder.com/32'

// 用户菜单显示状态
const showUserMenu = ref(false)

// 切换用户菜单显示
const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value
}

// 点击外部关闭菜单
onMounted(() => {
  document.addEventListener('click', (e) => {
    const userInfoEl = document.querySelector('.user-info')
    if (userInfoEl && !userInfoEl.contains(e.target as Node)) {
      showUserMenu.value = false
    }
  })
})

// 菜单项处理函数
const goToProfile = () => {
  showUserMenu.value = false
  router.push('/profile')
}

const goToSettings = () => {
  showUserMenu.value = false
  router.push('/settings')
}

const handleLogout = () => {
  showUserMenu.value = false
  userStore.logout()
}

// 移除切换主题函数，现在由ThemeSelect组件处理
</script>

<style scoped>
.top-nav {
  height: 64px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: relative;
  z-index: 10;
}

.top-nav-left {
  display: flex;
  align-items: center;
}

.top-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: #f5f5f5;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f0f0f0;
}

.user-name {
  margin-left: 8px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}
.user-menu-button {
  background: transparent;
  border: none;
  color: #666;
  padding: 4px;
  margin-left: 4px;
}

.user-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 160px;
  margin-top: 8px;
  z-index: 1000;
  overflow: hidden;
}

.menu-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

.menu-item.text-red-500 {
  color: #ff4d4f;
}

.menu-item.text-red-500:hover {
  background-color: #fff2f0;
}

.menu-separator {
  height: 1px;
  background-color: #f0f0f0;
  margin: 4px 0;
}
</style>